<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">

    <!--
    v-on:用来给页面中的标签绑定事件用的
    -->
    <button v-on:click="test2">单击事件</button>

    <h1>{{aa}}</h1>
    {{年龄}}

    <button v-on:click="test3">点我获取实例中的data数据</button>


    <!--点我给年龄加1-->
    <button v-on:click="addAge">点我给年龄加1</button>
    <button v-on:click="deleteAge">点我给年龄减1</button>

    <h1>  {{age}}</h1>

    <button v-on:click="all({count:14,aa:'one'})">参数获取</button>

    <h1>{{count}}</h1>


    <!--v-on的简化写法-->
    <button @click="test4">v-on的简化写法</button>
    {{msg}}
</div>
</body>
</html>

<!--引入vue-->
<script src="resource/vue.js"></script>
<script>
    new Vue({
        el:app,//指定vue实例作用范围
        data:{//用来绑定数据的
            aa:15,
            user:{test:1,name:"zhangsan",age:10},
            school:["男","女"],
            msg:"hello",
            age:1,
            count:0
        },
        methods:{
            test2:function () {
                alert("开始");
            },
            test3:function () {
                // 如果在vue中定义方法中获取data中的数据时，可以使用this,因为this代表的是整个vue实例
                this.aa++;
            },
            addAge:function () {
                this.age++;
            },
            deleteAge:function () {
                this.age--;
            },
            all:function (param) {//事件的传参
                this.count=param.count;
            },
            test4(){//函数的简化写法
                this.age++;

            }
        }



    });

</script>